<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DataGrid with Row ContextMenu -- jQUery EasyUI Demo</title>
        <link type="text/css" rel="stylesheet" href="../../../easyui-1.11.3/themes/bootstrap/easyui.css">
        <link rel="stylesheet" type="text/css" href="../../../easyui-1.11.3/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../../extend/themes/icon.css">
        <script type="text/javascript" src="../../jquery.min.js"></script>
        <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../../../easyui-1.11.3/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="../../extend/jquery.easyui.datagrid.extend.js"></script>
        <script type="text/javascript" src="../../extend/jquery.easyui.menu.extend.js"></script>
        <!--<script type="text/javascript" src="../../jquery.easyui.extensions.min.js"></script>-->
        <link rel="stylesheet" type="text/css" href="../../syntaxhighlighter/styles/shCoreDefault.css">
        <script type="text/javascript" src="../../syntaxhighlighter/scripts/shCore.js"></script>
        <script type="text/javascript" src="../../syntaxhighlighter/scripts/shBrushJScript.js"></script>
        <script type="text/javascript" src="../../syntaxhighlighter/scripts/shBrushXml.js"></script>
        <script type="text/javascript">
            SyntaxHighlighter.config.tagName = "textarea";
            SyntaxHighlighter.all();
        </script>
        <script type="text/javascript">
            $(function(){
                $('#datagrid').datagrid({
                    columns:[[
                        {field: 'ck', checkbox: true},
                        {field: 'itemid', width: 80, title: 'Item ID'},
                        {field: 'productid', width: 100, title: 'Product ID'},
                        {field: 'listprice', width: 80, align: 'right', title: 'List Price'},
                        {field: 'unitcost', width: 80, align: 'right', title: 'Unit Cost'},
                        {field: 'attr1', width: 250, title: 'Attribute'},
                        {field: 'status', width: 60, align: 'center', title: 'Status', hidden: true}
                    ]],
                    singleSelect: true,
                    rownumbers: true,
                    fit: true,
                    toolbar: '#tb',
                    title: 'Basic DataGrid',
                    method: 'get',
                    url: '../datagrid/datagrid_data1.json',
                    height: 250,
                    width: 700,
                    customAttr:{
                        rowContextMenu:{
                            isShow: true,
                            isMerge: false,
                            items: [
                                {text: 'item1'},
                                {text: 'item2'}
                            ]
                        }
                    }
                });
            });
            function showMore() {
                console.log('showMore');
                $(".more").show();

                $(".showmore").hide();
            }
            function showHide() {
                console.log('showHide');
                $(".more").hide(); 
                $(".showmore").show();
            }
        </script>
    </head>
    <body>
        <!--<h3>Row ContextMenu 自定义菜单项替换默认菜单项演示</h3>-->
        <!--<table id="datagrid"></table>-->



        <div class="easyui-tabs" data-options="fit: true, plain: true">
            <div data-options="title: 'Demo'">
                <h3>Row ContextMenu 自定义菜单项替换默认菜单项演示</h3>
                <table id="datagrid"></table>
            </div>
            <div id="tb" style="padding:2px 5px;">
                Date From: <input class="easyui-datebox" style="width:110px">
                To: <input class="easyui-datebox" style="width:110px">
                Language:
                <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                    <option value="java">Java</option>
                    <option value="c">C</option>
                    <option value="basic">Basic</option>
                    <option value="perl">Perl</option>
                    <option value="python">Python</option>
                </select>
                Date From: <input class="easyui-datebox" style="width:110px">
                To: <input class="easyui-datebox" style="width:110px">
                Language:
                <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                    <option value="java">Java</option>
                    <option value="c">C</option>
                    <option value="basic">Basic</option>
                    <option value="perl">Perl</option>
                    <option value="python">Python</option>
                </select>
                <div class="more">
                    Date From: <input class="easyui-datebox" style="width:110px">
                    To: <input class="easyui-datebox" style="width:110px">
                    Language:
                    <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                        <option value="java">Java</option>
                        <option value="c">C</option>
                        <option value="basic">Basic</option>
                        <option value="perl">Perl</option>
                        <option value="python">Python</option>
                    </select>
                    Date From: <input class="easyui-datebox" style="width:110px">
                    To: <input class="easyui-datebox" style="width:110px">
                    Language:
                    <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                        <option value="java">Java</option>
                        <option value="c">C</option>
                        <option value="basic">Basic</option>
                        <option value="perl">Perl</option>
                        <option value="python">Python</option>
                    </select>
                    Date From: <input class="easyui-datebox" style="width:110px">
                    To: <input class="easyui-datebox" style="width:110px">
                    Language:
                    <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                        <option value="java">Java</option>
                        <option value="c">C</option>
                        <option value="basic">Basic</option>
                        <option value="perl">Perl</option>
                        <option value="python">Python</option>
                    </select>
                    Date From: <input class="easyui-datebox" style="width:110px">
                    To: <input class="easyui-datebox" style="width:110px">
                    Language:
                    <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                        <option value="java">Java</option>
                        <option value="c">C</option>
                        <option value="basic">Basic</option>
                        <option value="perl">Perl</option>
                        <option value="python">Python</option>
                    </select>
                    Date From: <input class="easyui-datebox more" style="width:110px">
                    To: <input class="easyui-datebox more" style="width:110px">
                    Language:
                    <select class="easyui-combobox more" panelHeight="auto" style="width:100px">
                        <option value="java">Java</option>
                        <option value="c">C</option>
                        <option value="basic">Basic</option>
                        <option value="perl">Perl</option>
                        <option value="python">Python</option>
                    </select>
                </div>
                <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-help showmore" onclick="showMore(this)">更多</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-help more" onclick="showHide()">隐藏</a>
            </div>
            <div data-options="title: 'Code'" style="font-size: 14px;">
                <p>javascript:</p>
                <textarea class="brush: js; highlight: [18,19,20,21,22,23,24,25,26,27,29]">
                        $(function(){
                            $('#datagrid').datagrid({
                                columns:[[
                                    {field: 'ck', checkbox: true},
                                    {field: 'itemid', width: 80, title: 'Item ID'},
                                    {field: 'productid', width: 100, title: 'Product ID'},
                                    {field: 'listprice', width: 80, align: 'right', title: 'List Price'},
                                    {field: 'unitcost', width: 80, align: 'right', title: 'Unit Cost'},
                                    {field: 'attr1', width: 250, title: 'Attribute'},
                                    {field: 'status', width: 60, align: 'center', title: 'Status', hidden: true}
                                ]],
                                singleSelect: true,
                                rownumbers: true,
                                title: 'Basic DataGrid',
                                url: '../datagrid/datagrid_data1.json',
                                height: 250,
                                width: 700,
                                customAttr:{
                                    rowContextMenu:{
                                        isShow: true,
                                        isMerge: false,
                                        items: [
                                            {text: 'item1'},
                                            {text: 'item2'}
                                        ]
                                    }
                                }
                            });
                        });
                </textarea>

                <p>html:</p>
                <textarea class="brush: html;">
                <body>
                <h3>Row ContextMenu 自定义菜单项替换默认菜单项演示</h3>
                <table id="datagrid"></table>
                    </body>
                </textarea>
            </div>
        </div>
    </body>
</html>